<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef1 = ref<HTMLElement | null>(null)
const chartRef2 = ref<HTMLElement | null>(null)
let chart1: echarts.ECharts | null = null
let chart2: echarts.ECharts | null = null

// 生成模拟的时间数据
const generateTimeData = () => {
  const data = []
  const now = new Date()
  now.setHours(13, 0, 0, 0)
  for (let i = 0; i < 60; i++) {
    const time = new Date(now.getTime() + i * 5 * 60 * 1000)
    data.push(time.getHours() + ':' + time.getMinutes().toString().padStart(2, '0'))
  }
  return data
}

// 初始化图表
const initCharts = () => {
  if (!chartRef1.value || !chartRef2.value) return

  // 初始化第一个图表：平滑折线图
  chart1 = echarts.init(chartRef1.value)
  const option1 = {
    title: {
      text: '实时报警监控',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params: any) {
        return `${params[0].name}<br/>${params[0].seriesName}: ${params[0].value}`
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: generateTimeData(),
      axisLabel: {
        interval: 4
      }
    },
    yAxis: {
      type: 'value',
      name: '报警次数'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [{
      name: '报警次数',
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        width: 2,
        color: '#4B96FF'
      },
      areaStyle: {
        opacity: 0.2,
        color: '#4B96FF'
      },
      data: [11, 11, 12, 13, 12, 13, 14, 12, 13, 15, 14, 16, 15, 17, 21, 18, 19, 17, 16, 15, 14, 14, 13, 12,
        11, 11, 12, 13, 12, 13, 14, 12, 13, 15, 14, 16, 15, 17, 21, 18, 19, 17, 16, 15, 14, 14, 13, 12]
    }]
  }

  // 初始化第二个图表：堆积柱状图和折线图
  chart2 = echarts.init(chartRef2.value)
  const option2 = {
    title: {
      text: '报警次数统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['female', 'male', 'average'],
      bottom: 0
    },
    xAxis: {
      type: 'category',
      data: ['2month', '3month', '4month', '5month', '6month', '7month', '8month', '9month', '10month'],
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '报警次数',
        min: 0,
        max: 15000,
        interval: 3000
      }
    ],
    series: [
      {
        name: 'female',
        type: 'bar',
        stack: 'total',
        data: [2000, 1800, 2200, 1500, 1200, 1000, 2500, 3500, 2000],
        color: '#FF9F7F'
      },
      {
        name: 'male',
        type: 'bar',
        stack: 'total',
        data: [1500, 1200, 1800, 1000, 800, 1200, 1500, 2000, 1500],
        color: '#4ED8DA'
      },
      {
        name: 'average',
        type: 'line',
        data: [7000, 6000, 7500, 5000, 4000, 4000, 9000, 11000, 8000],
        color: '#FFD700'
      }
    ]
  }

  chart1.setOption(option1)
  chart2.setOption(option2)
}

// 监听窗口大小变化
const handleResize = () => {
  chart1?.resize()
  chart2?.resize()
}

onMounted(() => {
  initCharts()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chart1?.dispose()
  chart2?.dispose()
})
</script>


<template>
  <div class="chart-container">
    <div ref="chartRef1" class="chart"></div>
    <div ref="chartRef2" class="chart"></div>
  </div>
</template>

<style scoped>
.chart-container {
  width: 90%;
  height: 800px;
  padding: 20px;
}

.chart {
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
  height: 50%;
  margin-bottom: 20px;
}
</style>
